<!-- eslint-disable vue/no-multiple-template-root -->
<template>
  <view>
    <!-- <u-navbar title="菜品" :safeAreaInsetTop="true"></u-navbar> -->
    <div class="top">
      <u-search
        placeholder="搜索商品关键字"
        v-model="keyword"
        :clearabled="true"
        :show-action="false"></u-search>
    </div>
    <div
      style="display: flex; justify-content: space-around; margin-top: 20rpx">
      <div :class="index1 == 0 ? 'active' : 'title'" @click="add(0)">
        上架中
      </div>
      <div :class="index1 == 1 ? 'active' : 'title'" @click="add(1)">
        下架中
      </div>
      <div :class="index1 == 2 ? 'active' : 'title'" @click="add(2)">限购</div>
    </div>
    <div class="card-box" v-for="(item, index) in uplist" :key="index">
      <div class="top3">
        <div style="float: right" class="tt1">移动复制</div>
      </div>
      <div class="foodmsg">
        <div class="pic-box1">
          <image
            :src="item.image"
            mode="scaleToFill"
            style="width: 200rpx; height: 200rpx; border-radius: 20rpx" />
        </div>
        <div style="margin-left: 10rpx; line-height: 50rpx">
          <div class="title5">{{ item.foodName }}</div>
          <div style="display: flex" class="title6">
            <div>已售：{{ item.counts }}份</div>
            <div>限购：{{ item.limitCount }}份</div>
          </div>
          <div class="title6">排序：暂无</div>
          <div class="title6">￥{{ item.storePrice }}</div>
        </div>
      </div>
      <div class="bottom">
        <div style="display: flex">
          <div class="title7" @click="editfoodmsg(item)">编辑</div>
          <div class="title7" @click="deltfood(item)">删除</div>
        </div>
        <div style="display: flex">
          <div class="btn-1" @click="Shelves(item)">上架</div>
          <div class="btn-1" @click="offshelves(item)">下架</div>
        </div>
      </div>
    </div>
    <!-- 编辑抽屉 -->
    <div>
      <up-popup
        :show="show"
        @close="close"
        mode="right"
        :safeAreaInsetBottom="true">
        <div style="padding: 20rpx">
          <!-- 商家名称 -->
          <div class="mar">
            <div class="titlemsg">商品名称</div>
            <div style="margin-top: 10rpx">
              <up-input
                placeholder="请输入内容"
                border="surround"
                shape="circle"
                v-model="from.foodName"></up-input>
            </div>
          </div>
          <!-- 商品描述 -->
          <div class="mar">
            <div class="titlemsg">商品描述</div>
            <div style="margin-top: 10rpx">
              <up-input
                placeholder="请输入内容"
                border="surround"
                shape="circle"
                v-model="from.description"></up-input>
            </div>
          </div>
          <!-- 价格编辑 -->
          <div class="mar">
            <div class="titlemsg">商品价格</div>
            <div style="margin-top: 10rpx">
              <up-input
                placeholder="请输入内容"
                border="surround"
                shape="circle"
                v-model="from.storePrice"></up-input>
            </div>
          </div>
          <!-- 商品图片 -->
          <div
            style="
              display: flex;
              justify-content: space-around;
              align-items: center;
            "
            class="mar">
            <!-- 图片区域 -->
            <div style="margin-top: 10rpx">
              <div style="margin-bottom: 10rpx" class="titlemsg">商品图片</div>
              <div>
                <image
                  :src="from.image"
                  mode="scaleToFill"
                  v-show="from.image ? true : false"
                  style="
                    width: 150rpx;
                    height: 150rpx;
                    border-radius: 20rpx;
                    margin-right: 10rpx;
                  "
                  @click="chooseImage" />
                <div
                  class="box1"
                  v-show="from.image ? false : true"
                  @click="chooseImage">
                  <up-icon name="plus"></up-icon>
                </div>
              </div>
            </div>
            <!-- 限购、排序 -->
            <div class="mar">
              <div>
                <div class="titlemsg">限购</div>
                <div>
                  <up-input
                    placeholder="请输入内容"
                    border="surround"
                    shape="circle"
                    v-model="from.limitCount"></up-input>
                </div>
              </div>
              <div>
                <div class="titlemsg">排序</div>
                <div>
                  <up-input
                    placeholder="请输入内容"
                    border="surround"
                    shape="circle"
                    v-model="from.sort"></up-input>
                </div>
              </div>
            </div>
          </div>
          <!-- 规格 -->
          <div class="mar">
            <div class="titlemsg">添加规格</div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              ">
              <up-input
                placeholder="请输入内容"
                border="surround"
                shape="circle"
                v-model="from.specification"></up-input>
              <div style="margin-left: 10rpx">删除</div>
            </div>
          </div>
          <!-- 是否上架 -->
          <div class="mar">
            <div class="titlemsg">是否上下架</div>
            <div>
              <div>
                <up-radio-group
                  v-model="radiovalue1"
                  placement="row"
                  @change="groupChange">
                  <up-radio
                    :customStyle="{ marginBottom: '8px' }"
                    v-for="(item, index) in radiolist1"
                    v-model="from.state"
                    :key="index"
                    :label="item.name"
                    :name="item.name"
                    @change="radioChange"></up-radio>
                </up-radio-group>
              </div>
            </div>
          </div>
          <!-- 保存按钮 -->
          <div class="add-btn">保存</div>
        </div>
      </up-popup>
    </div>
  </view>
  <Tabbar></Tabbar>
</template>
<script setup>
import Tabbar from '@/components/tabbar/index.vue'
import { useMemberStore } from '@/stores'
import { getadd, delfoodmsg } from '@/api/getfood'
// import { chooseImage } from '@/utils/tools'
const memberStore = useMemberStore()
const index1 = ref(0)
const from = ref({
  id: '',
  foodName: '',
  image: '',
  description: '',
  specification: '',
  storePrice: 0,
  limitCount: 0,
  foodTypeName: null,
  state: '',
  delFlag: '',
  sort: 0
})
// 抽屉显示隐藏
const show = ref(false)
// 滑动开关
// const value4 = ref(true)
// 上架菜品列表
const uplist = ref([])
// tab切换操作
const add = (index) => {
  if (index == 1) {
    // 获取下架商品
    datamsg.value.state = 2
    getfoodmsg(datamsg.value)
  } else if (index == 2) {
    // 获取限购商品
    datamsg.value.state = 3
    getfoodmsg(datamsg.value)
  } else {
    // 获取上架商品
    datamsg.value.state = 1
    getfoodmsg(datamsg.value)
  }
  index1.value = index
}
const radiolist1 = reactive([
  {
    name: '上架',
    disabled: true
  },
  {
    name: '下架',
    disabled: false
  }
])
// 获取数据data
const datamsg = ref({
  storeId: memberStore.profile.storeId,
  state: 1
})
// 编辑删除data
const changedata = ref({
  id: '',
  delFlag: '0',
  state: ''
})
// 获取菜品数据
const getfoodmsg = async (data) => {
  const res = await getadd(data)
  uplist.value = res.result
}
/**
 * @删除菜品数据
 */
const deltfood = async (data) => {
  changedata.value.id = data.id
  changedata.value.delFlag = '1'
  changedata.value.state = data.state
  const res = await delfoodmsg(changedata.value)
  if (res.code == 200) {
    uni.showToast({
      icon: 'success',
      title: '删除成功',
      duration: 2000
    })
  }
  getfoodmsg(datamsg.value)
}
/**
 * @编辑菜品数据
 */
const editfoodmsg = (data) => {
  show.value = true // 抽屉显示
  Object.assign(from.value, { ...data })
}
/**
 * @关闭抽屉
 */
const close = () => {
  show.value = false // 抽屉隐藏
}

/**
 *
 * @param 菜品上架
 */
const Shelves = async (data) => {
  if (data.state == 'yes') {
    uni.showToast({
      icon: 'error',
      title: '该菜品已上架',
      duration: 2000
    })
  } else {
    changedata.value.delFlag = '0'
    changedata.value.id = data.id
    changedata.value.state = '1'
    const res = await delfoodmsg(changedata.value)
    if (res.code == 200) {
      uni.showToast({
        icon: 'success',
        title: '上架成功',
        duration: 2000
      })
    }
    getfoodmsg(datamsg.value)
  }
}
/**
 *
 * @param 菜品下架
 */
const offshelves = async (data) => {
  if (data.state == 'no') {
    uni.showToast({
      icon: 'error',
      title: '该菜品已下架',
      duration: 2000
    })
  } else {
    changedata.value.delFlag = '0'
    changedata.value.id = data.id
    changedata.value.state = '2'
    const res = await delfoodmsg(changedata.value)
    console.log(res)
    getfoodmsg(datamsg.value)
  }
}
const chooseImage = () => {
  return new Promise((resolve, reject) => {
    uni.getSetting({
      async success(res) {
        if (res.authSetting['scope.writePhotosAlbum']) {
          // 已授权，直接保存图片
          // 这里写保存图片代码.......
          resolve(await uploadImg())
        } else if (res.authSetting['scope.writePhotosAlbum'] === false) {
          // 用户已拒绝授权，提示用户授权
          uni.showModal({
            title: '提示',
            content: '您未授权保存图片到相册，是否前往设置页面进行授权？',
            success: function (res) {
              if (res.confirm) {
                uni.openSetting({
                  success: async function (res) {
                    if (res.authSetting['scope.writePhotosAlbum']) {
                      resolve(await uploadImg())
                    }
                  }
                })
              } else if (res.cancel) {
                // eslint-disable-next-line prefer-promise-reject-errors
                reject()
                uni.showToast({
                  title: '您取消了授权',
                  icon: 'none',
                  duration: 2000
                })
              }
            }
          })
        } else {
          // 用户第一次调用，调用授权接口
          uni.authorize({
            scope: 'scope.writePhotosAlbum',
            async success() {
              // 这里写保存图片代码.......
              resolve(await uploadImg())
            },
            fail() {
              // eslint-disable-next-line prefer-promise-reject-errors
              reject()
              uni.showToast({
                title: '授权失败，请稍后重试',
                icon: 'none',
                duration: 2000
              })
            }
          })
        }
      }
    })
  })
}

// 封装的本地选择图片
async function uploadImg() {
  try {
    const res = await uni.chooseImage({
      count: 1
    })
    const url = 'http://120.24.43.109:8080/jeecg-boot//jx/oss/upload' // 上传地址
    const timestamp = new Date().getTime() // 文件名
    uni.uploadFile({
      url, // 上传地址
      filePath: res.tempFilePaths[0], // 上传文件的临时路径
      name: 'file',
      formData: {
        name: 'app/' + timestamp, // 文件名
        key: 'app/' + timestamp, // 文件名
        success_action_status: '200'
      },
      success: (e) => {
        // 上传成功的图片地址
        const httpurl = JSON.parse(e.data).message
        from.value.image = httpurl
      }
    })

    // userInfo.image = url + '/app/' + timestamp
  } catch (err) {
    console.log(err)
  }
}
onLoad(async () => {
  getfoodmsg(datamsg.value)
})
</script>
<style>
.u-navbar--fixed.data-v-9d9e7ee2 {
  position: relative !important;
  background: #ff6306;
}
.u-status-bar.data-v-c0b45a48 {
  background: none !important;
}
.u-navbar__content.data-v-9d9e7ee2 {
  background: none !important;
}
.top {
  padding: 10rpx;
  background: rgba(255, 99, 6, 1);
}
page {
  background: rgba(246, 246, 246, 1);
}
.title {
  color: rgba(153, 153, 153, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
}
.active {
  color: rgba(255, 99, 6, 1);
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
}
.card-box {
  width: 690rpx;
  height: 416rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 1);
  margin: 20rpx auto;
}
.top3 {
  width: 630rpx;
  border-bottom: 1px solid #ccc;
  margin: auto;
  padding: 20rpx;
  overflow: hidden;
}
.tt1 {
  color: rgba(102, 102, 102, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 22rpx;
}
.pic-box1 {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}
.foodmsg {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid rgba(238, 238, 238, 1);
}
.title5 {
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
}
.title6 {
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}
.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
}
.title7 {
  color: rgba(102, 102, 102, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 22rpx;
  margin-left: 30rpx;
}
.btn-z {
  border-radius: 28rpx;
  border: 2rpx solid rgba(102, 102, 102, 1);
  box-sizing: border-box;
  width: 128rpx;
  height: 56rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
  color: rgba(102, 102, 102, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
}
.btn-1 {
  border-radius: 28rpx;
  box-sizing: border-box;
  width: 128rpx;
  height: 56rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: rgba(255, 99, 6, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  border: 2rpx solid rgba(255, 99, 6, 1);
}
.u-popup__content.data-v-74921bef {
  width: 550rpx;
}
.input-box {
  margin-top: 10rpx;
  width: 500rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background: rgba(238, 238, 238, 1);
}
.u-radio-group--row.data-v-272bb654 {
  justify-content: space-between;
}
.add-btn {
  height: 64rpx;
  border-radius: 32rpx;
  background: rgba(255, 99, 6, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 28rpx;
}
.mar {
  margin: 20rpx 0rpx;
}
.titlemsg {
  color: rgba(0, 0, 0, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}
.box1 {
  width: 150rpx;
  height: 150rpx;
  border-radius: 20rpx;
  background-color: #fff;
  border: 1px solid #ccc;
  margin-right: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
